<template>
  <div
    :class="{
      'templateMould-box': !getPageScrollType(route.meta.templateId),
      'no-scroll-box-parent': getPageScrollType(route.meta.templateId),
    }"
  >
    <div
      class="page-left"
      :class="{ 'page-left-padding': store.glanceOver, 'no-scroll-box': getPageScrollType(route.meta.templateId) }"
    >
      <slot name="left"></slot>
    </div>
    <div
      id="page-right-by-id-sp399"
      class="page-right"
      :class="{ 'no-scroll-box-right': getPageScrollType(route.meta.templateId) }"
      v-if="!store.glanceOver"
    >
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getPageScrollType } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { useRoute } from 'vue-router';
import { ref } from 'vue';

// const noCsroll = ref(false);
const route = useRoute();
const store = useProjectStore();
// if (route.meta.templateId === 1997) {
//   noCsroll.value = true;
// }
alert(getPageScrollType(route.meta.templateId));
console.log(getPageScrollType(route.meta.templateId));
</script>

<style lang="less" scoped>
.templateMould-box {
  display: flex;
  width: 100vw;
  max-height: calc(100vh - 56px);
}
.no-scroll-box-parent {
  width: 100vw;
  // height: auto;
  min-height: calc(100vh - 56px);
  margin-top: 56px;
}
.page-left {
  flex: 1;
  // padding: 0 20px;
  // padding-top: 18px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.no-scroll-box {
  height: auto;
  min-height: calc(100vh - 56px);
  overflow-y: visible;
}
.page-left::-webkit-scrollbar {
  display: none;
}
.page-left-padding {
  padding: 0;
}
.page-right {
  position: relative;
  z-index: 6666;
  // position: fixed;
  // top: 72px;
  // right: 0;
  // position: relative;
  width: calc(308px + 56px);
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  //   background: green;
  // overflow: scroll;
}
.no-scroll-box-right {
  position: fixed;
  top: 56px;
  right: 0;
  width: calc(308px + 56px);
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
}
.page-left-item {
  width: 1440px;
}
.page-left-padding::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.page-left {
  background: #fff;
}
</style>
